'use client'

import { Fragment } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'

export default function DashboardBreadcrumb() {
  const pathname = usePathname()

  const breadcrumbList = [
    {
      name: 'Dashboard',
      link: '',
    },
  ]

  if (pathname === '/projects') {
    breadcrumbList.push({
      name: 'Projects',
      link: '',
    })
  }
  if (pathname === '/projects/add') {
    breadcrumbList.push({
      name: 'Projects',
      link: '/projects',
    })
    breadcrumbList.push({
      name: 'Add',
    })
  }
  if (pathname.startsWith('/projects/edit/')) {
    breadcrumbList.push({
      name: 'Projects',
      link: '/projects',
    })
    breadcrumbList.push({
      name: 'Edit',
    })
  }

  if (pathname === '/keywords') {
    breadcrumbList.push({
      name: 'Keywords',
      link: '',
    })
  }
  if (pathname === '/keywords/add') {
    breadcrumbList.push({
      name: 'Keywords',
      link: '/keywords',
    })
    breadcrumbList.push({
      name: 'Add',
    })
  }
  if (pathname.startsWith('/keywords/edit/')) {
    breadcrumbList.push({
      name: 'Keywords',
      link: '/keywords',
    })
    breadcrumbList.push({
      name: 'Edit',
    })
  }

  if (pathname === '/mentions') {
    breadcrumbList.push({
      name: 'Mentions',
      link: '',
    })
  }

  if (pathname === '/replies') {
    breadcrumbList.push({
      name: 'Replies',
      link: '',
    })
  }

  if (pathname === '/billing') {
    breadcrumbList.push({
      name: 'Billing',
      link: '',
    })
  }

  return (
    <Breadcrumb className="hidden md:flex">
      <BreadcrumbList>
        {breadcrumbList.map((item, index) => {
          if (index < breadcrumbList.length - 1) {
            return (
              <Fragment key={index}>
                <BreadcrumbItem>
                  {item.link !== '' ? (
                    <BreadcrumbLink asChild>
                      <Link href={item.link}>{item.name}</Link>
                    </BreadcrumbLink>
                  ) : (
                    item.name
                  )}
                </BreadcrumbItem>
                <BreadcrumbSeparator />
              </Fragment>
            )
          } else {
            return (
              <BreadcrumbItem key={index}>
                <BreadcrumbPage>{item.name}</BreadcrumbPage>
              </BreadcrumbItem>
            )
          }
        })}
      </BreadcrumbList>
    </Breadcrumb>
  )
}
